<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #con {
      width: 300px;
      height: 300px;
      background: darkolivegreen;
    }
  </style>
</head>

<body>
  <h1>游戏排行</h1>
  <p>王者荣耀</p>
  <p>英雄联盟</p>
  <p>绝地求生</p>
  <p>dnf</p>
  <ul>
    <li>阿卡丽</li>
    <li>奈德丽</li>
    <li class="hot">劲夫</li>
    <li>托儿索</li>
    <li>提百万</li>
    <li>德玛西亚</li>
    <li>恕瑞玛</li>
    <li>艾欧尼亚</li>
    <li>祖安</li>
  </ul>

  <h1>西藏</h1>
  <h2>青藏高原</h2>
  <h3>西双版纳</h3>

  <input type="text" id="txt">
  <input type="text">


  <div id="con"></div>
  <div style="margin-bottom: 300px;"></div>
  <script src="./jquery-3.4.1.min.js"></script>
  <script>
    //1. h1+p  下一个兄弟元素选择器
    $("h1+p").css({ color: "red" })
    //2 h1~p   下面的所有兄弟元素选择器
    $("h1~p").css("background", "pink");
    //3. :first 获取一组元素中第一个元素
    $("ul li:first").css({ color: "red" })
    //4. :last 获取一组元素中的最后一个
    $("ul li:last").css({ color: "blue" })
    //5. :eq(index) 获取一组元素中 固定下标的元素
    $("ul li:eq(2)").css({ "color": "green" });
    //6. gt(index) 选择所有大于当前下标的元素
    $("ul li:gt(2)").css({ background: "pink" })
    //8. lt(index) 选择所有小于当前下标的元素
    $("ul li:lt(2)").css({ background: "yellow" })
    // :odd 选择所有奇数下标的元素
    $("ul li:odd").css({ "font-size": "40px" })
    // :even 选择所有偶数下标的元素
    $("ul li:even").css({ "font-size": "12px" })
    // :not(选择器) 去除所有与给定选择器匹配的元素
    $("ul li:not(.hot)").css({ "text-decoration": "underline" })
    // :header  匹配如 h1, h2, h3之类的标题元素
    $(":header").css({ color: "cyan" })

    // :animated 获取正在运动的元素
    function move() {
      $("#con").slideUp(2000, function () {
        $("#con").slideDown(2000, function () {
          move()
        })
      })
    }
    move()
    $(":animated").css({ background: "red" })
    // :focus 获取正在获取焦点元素
    var txt = document.getElementById("txt");
    txt.focus(); //元素获取焦点
    $(":focus").css("background", "blue")


  </script>
</body>

</html>